<template>
  <div class="bigbox">
    <!-- 查询区域 -->
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" :model="queryParam" :rules="rules" ref="ruleForm">
          <a-row :gutter="20">
            <a-col :md="6" :sm="3">
              <a-form-model-item label="手机号" prop="phone" ref="name">
                <a-input
                  v-model="queryParam.phone"
                  placeholder="请输入"
                  @blur="
                    () => {
                      $refs.name.onFieldBlur()
                    }
                  "
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="3">
              <a-form-model-item label="状态">
                <a-select v-model="queryParam.status">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option value="0">已取消</a-select-option>
                  <a-select-option value="1">待完善</a-select-option>
                  <a-select-option value="2">已创建</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="3">
              <a-form-model-item label="所属搭配师">
                <a-select v-model="queryParam.fashionerId">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option v-for="item in description" :key="item.code" :value="item.code">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="3">
              <a-form-model-item label="创建日期">
                <a-range-picker
                  style="width: 100%"
                  showToday
                  :show-time="{
                    hideDisabledOptions: true,
                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
                  }"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="['开始时间', '结束时间']"
                  v-model="queryParam.creationdate"
                />
              </a-form-model-item>
            </a-col>
            <a-col :xxl="24" :xl="16" :lg="24" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'left', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 18px" @click="resetList">重置</a-button>
                <a-button type="primary" style="margin-left: 18px" @click="handleImportXls">导入</a-button>
                <j-import-modal
                  :outId="userInfo.realname"
                  ref="importModal"
                  :url="getImportUrl()"
                  :uploadParams="getUploadParams()"
                  @ok="importOk"
                  :templateUrl="templateUrl()"
                  :serviceId="25"
                ></j-import-modal>
                <a-button type="primary" style="margin-left: 18px" @click="handleExport">导出</a-button>
                <ExportModal ref="exportModal"></ExportModal>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>

      <!-- 列表区域 -->
      <div class="mytable">
        <a-table ref="table" :columns="columns" :data-source="data" :pagination="paginationProps" :rowKey="record => record.id" @change="tablePaginationChange">
          <span slot="action" slot-scope="record">
            <template v-if="record.status == 1">
              <a @click="showModal(record)" style="margin-right: 10px">完善</a>
              <!-- <a-popconfirm title="确认取消吗？" ok-text="确认" cancel-text="取消" @confirm="confirm(record)">
                <a href="#" @click="cancel">取消</a>
              </a-popconfirm> -->
              <a-popconfirm title="确认取消吗？" ok-text="确认" cancel-text="取消" @confirm="Myconfirm(record)">
                <a href="#">取消</a>
              </a-popconfirm>
            </template>
          </span>
          <span slot="status" slot-scope="text">
            <!-- <span v-if="text == 3">待处理</span> -->
            <span v-if="text == 2">已创建</span>
            <span v-if="text == 1">待完善</span>
            <span v-if="text == 0">已取消</span>
          </span>
        </a-table>
      </div>
    </a-card>
    <!-- 完善功能 -->
    <div>
      <a-modal title="完善" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
        <div style="margin-bottom: 20px">* 会员手机号：{{ collocation.phone }}</div>
        <a-form>
          <a-form-item label="搭配师：" :label-col="formItemLayout.labelCol" :wrapper-col="{ span: 12, offset: 1 }">
            <a-select placeholder="请选择" v-model="fashionerId" show-search :filter-option="filterOption">
              <a-select-option v-for="item in description" :key="item.code" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 }
}
const columns = [
  {
    title: '会员手机号',
    dataIndex: 'phone',
    width: 150
  },
  {
    title: '所属搭配师',
    dataIndex: 'fashionerName',
    width: 150
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 150,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    width: 150
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 150
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 220
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

import { goodsCardList, batchChangeFashioner, autoCreateAskBoxCancel } from '@api/box/creationTool'
import { getFashioners } from '@/api/box/member'
import { queryUploadSuccess, fetchExportFileId } from '@/components/qiniuUpload/common'
import JImportModal from '@/components/qiniuUpload/JImportModal'
import ExportModal from '@/components/qiniuUpload/ExportModal'
import globalData from '@/assets/js/common'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import moment from 'moment'
import 'moment/locale/zh-cn'

export default {
  data() {
    return {
      formItemLayout,
      moment,
      userInfo: Vue.ls.get(USER_INFO),
      //搭配师数据
      description: [],
      // 完善功能
      visible: false,
      confirmLoading: false,
      // 分页
      paginationProps: {
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      data: [],
      columns,

      //搭配师参数
      collocation: {
        fashionerId: '',
        id: '',
        phone: ''
      },
      fashionerId: '',
      //查询参数
      queryParam: {
        creationdate: [],
        fashionerId: '',
        id: '',
        phone: '',
        status: ''
      },
      //自定义校验
      rules: {
        phone: [{ min: 11, max: 11, message: '长度应为11字符', trigger: 'blur' }]
      },
      requestData: {
        createTimeBegin: '',
        createTimeEnd: '',
        fashionerId: '',
        phone: ''
      }
    }
  },
  created() {
    this.MygoodsCardList()
    this.getBatchChangeFashioner()
  },
  components: { JImportModal, ExportModal },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    tablePaginationChange(pagination) {
      // console.log(pagination)
      this.paginationProps.current = pagination.current // 重新设置当前页
      this.paginationProps.pageSize = pagination.pageSize
      this.MygoodsCardList()
    },
    //表格列表
    MygoodsCardList() {
      const queryParam = JSON.parse(JSON.stringify(this.queryParam))
      delete queryParam.creationdate
      let param = {
        page: { pageNo: this.paginationProps.current, pageSize: this.paginationProps.pageSize },
        requestData: queryParam
      }

      if (this.queryParam.creationdate && this.queryParam.creationdate.length > 0) {
        param.requestData.createTimeBegin = this.queryParam.creationdate[0]
        param.requestData.createTimeEnd = this.queryParam.creationdate[1]
      }
      goodsCardList(param).then(res => {
        if (res.code == 0) {
          this.data = res.data
          this.paginationProps.current = res.page.pageNo
          this.paginationProps.total = res.page.count
        } else {
          this.$message.success(res.msg)
        }
      })
    },
    //完善功能调用
    showModal(item) {
      this.visible = true
      this.collocation.phone = item.phone
      this.collocation.fashionerId = ''
      this.collocation.id = item.id
      this.fashionerId = ''
    },
    handleOk(e) {
      // this.c = true
      if (!this.fashionerId) {
        this.$message.warning('请选择搭配师')
        return
      }
      this.collocation.fashionerId = this.fashionerId
      let param = {
        requestData: this.collocation
      }
      batchChangeFashioner(param).then(res => {
        if (res.code == 0) {
          this.$message.success('完善成功')
          this.visible = false
          this.MygoodsCardList()
        } else {
          this.$message.warning(res.msg)
          this.visible = false
        }
        this.confirmLoading = false
        // this.searchList()
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    //获取日期
    //查询功能
    searchList() {
      if (this.queryParam.phone.length === 11 || this.queryParam.phone.length === 0) {
        this.paginationProps.current = 1
        this.MygoodsCardList()
      } else {
        return
      }
    },
    //重置
    resetList() {
      this.queryParam = { creationdate: [], fashionerId: '', phone: '', status: '' }
      this.searchList()
      this.$refs.ruleForm.resetFields()
    },
    //获取搭配师
    getBatchChangeFashioner() {
      getFashioners().then(res => {
        this.description = res.data
      })
    },
    //确认取消
    Myconfirm(record) {
      let params = {
        requestData: {
          id: record.id,
          status: 0
        }
      }
      autoCreateAskBoxCancel(params).then(res => {
        if (res.code == 0) {
          this.$message.success('取消成功')
          this.MygoodsCardList()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 导入
    handleImportXls() {
      console.log('导入')
      this.$refs.importModal.show()
    },
    // 处理上传业务的后台地址
    getImportUrl() {
      return ''
    },
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    // 上传成功后的方法
    importOk(result, fileList) {
      let that = this
      queryUploadSuccess(this.timer, result, 60000, function(x) {
        console.log(x)
        if (x == 'done' || x == 'warning') {
          that.$refs.importModal.close()
          that.searchList()
        }
        if (x == 'done') {
          console.log(fileList)
        }
      })
    },
    templateUrl() {
      return 'https://img.bzhz.jnbygroup.com/creaTool.xlsx'
    },
    // 导出
    async handleExport() {
      console.log(this.queryParam)
      const param = {
        createTimeBegin: this.queryParam.creationdate[0],
        createTimeEnd: this.queryParam.creationdate[1],
        fashionerId: this.queryParam.fashionerId,
        phone: this.queryParam.phone
      }
      let result = await fetchExportFileId(param, 26)
      if (result) {
        this.$refs.exportModal.show(result)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bigbox {
  width: 100%;
  height: 500px;
  background-color: 255, 255, 255;
  margin: 10px;
}
.mytable {
  background-color: #fff;
}
.ant-pagination {
  display: none;
}
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
</style>

